<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>宇成建筑</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="../statics/css/font.css">
    <link rel="stylesheet" href="../statics/plugins/layui/css/layui.css">
    <link rel="stylesheet" href="../statics/css/xadmin.css">
    <link rel="stylesheet" href="../statics/css/style.css">
    <style>
        .layui-colla-icon{
            left:96% !important;
        }
    </style>
</head>

<body class='labelAuto'>
<div class="x-nav">
        <span class="layui-breadcrumb">
            <a href="welcome.html">首页</a>
            <a href="javascript:;">财务</a>
            <a href="javascript:;">供应商财务结算</a>
            <a href="javascript:;">项目结算(<span class="tip"></span>)</a>
            <a>
                <cite>项目月汇总</cite>
            </a>
        </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right;margin-right:10px"
       onclick="window.history.go(-1)" title="后退">
        <i class="iconfontBlod" style="line-height:30px">&#xe74f;</i>
    </a>
</div>
<div class="layui-fluid">
    <div class="layui-d layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body search">
                    <form action="" class="layui-form livingList">
                        <!--                        <div class="layui-item">-->
                        <!--                            <div class="layui-inline">-->
                        <!--                                <label class="layui-form-label">搜索</label>-->
                        <!--                                <div class="layui-input-block">-->
                        <!--                                    <input type="search" autocomplete="off" class="layui-input">-->
                        <!--                                </div>-->
                        <!--                            </div>-->
                        <!--                            <div class="layui-inline">-->
                        <!--                                <button class="layui-btn search" type="button" id='search'>-->
                        <!--                                    <i class="iconfont layui-icon">&#xe615;</i>-->
                        <!--                                </button>-->
                        <!--                            </div>-->
                        <!--                        </div>-->
                    </form>
                </div>
                <div class="layui-card-body tableCardBody">
                    <table class="layui-table" id="lists" lay-filter="test"></table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="../statics/plugins/layui/layui.js" charset="utf-8"></script>
<script src='../statics/plugins/jQuery-3.2.1/jquery-3.2.1.min.js'></script>
<script type="text/javascript" src="../statics/plugins/X-admin/xadmin.js"></script>
<script type="text/javascript" src="../statics/js/public.js?v=1129"></script>
<script type="text/javascript">
    layui.use(['form', 'layer', "table", "element","laydate"], function () {
        var form = layui.form;
        var laydate = layui.laydate;
        var table = layui.table;
        var layer = layui.layer;
        var element = layui.element;
        var supplierId = Number(getQueryString('supplierId'));
        var projectId = Number(getQueryString('projectId'));
        $('span.tip').html(localStorage.getItem('projectName'));
        // 异步数据加载
        var lists = table.render({
            elem: '#lists', //绑定DOM元素
            id: 'lists', //table的id
            title: '人员列表',
            height: 'full-150',
            contentType: "application/json; charset=utf-8",
            url: url + '/finance/supplier/supplierProjectOrdersFinance', //数据接口地址
            request: {
                pageName: 'page', //页码的参数名称，默认：page
                limitName: 'length' //每页数据量的参数名，默认：limit
            },
            method: 'POST',
            parseData: function (res) {
                return {
                    "code": res.code, //解析接口状态
                    "data": res.data,
                    "msg": res.msg,
                };
            },
            where: {
                supplierId: supplierId,
                projectId: projectId,
                search: "",
                token: getToken()
            },
            toolbar: '#toolbar',
            defaultToolbar: ['filter'],
            page: false, //开启分页
            limit: 10, //默认每页记录条数
            limits: [10, 20, 50], //每页记录条数可选数量
            cols: [
                [ //表头
                    {field: '', title: '编号', type: 'numbers', width: '8%'},
                    {field: 'time', title: '时间',},
                    {field: 'ordersSum', title: '当月总货款',},
                    {field: 'paySum', title: '已付货单总金额'},
                    {field: 'unpaySum', title: '未付款总额'},
                    {
                        field: '', title: '操作', width: "23%", templet(d) {
                            return `
                            <button class='ordersLists layui-btn' data-id=${d.id}  lay-event="ordersLists" auth='supplierOrders'>货单详情</button>
                        `
                        }
                    }
                ]
            ],
            response: {
                statusName: 'code', //数据状态的字段名称，默认：code
                statusCode: 100000, //成功的状态码，默认：0
                msgName: 'msg', //状态信息的字段名称，默认：msg
                countName: 'count', //数据总数的字段名称，默认：count
                dataName: 'data' //数据列表的字段名称，默认：data
            },
            done:function(){
                permission();
            }
        });
        table.on('tool(test)', function (data) {
            if (data.event == 'ordersLists') {
                var id = Number(data.data.id);
                var month = data.data.time;
                var tableData = [];
                $.ajax({
                    url: url + "/finance/supplier/ordersLists",
                    type: "POST",
                    async: false,
                    data: {
                        supplierId: supplierId,
                        projectId: projectId,
                        month: month,
                        token: $.parseJSON(localStorage.getItem('login_msg')).token
                    },
                    success: function (r) {
                        if (r.code == 100000) {
                            tableData = r.data;
                        } else {
                            tips('货单记录', r);
                        }
                    }
                });
                var formHtml = `
                        <div class='layui-item'>
                            <div class='layui-inline'>
                                <label class='layui-form-label'>货单总额</label>
                                <div class='layui-input-block' style="width:70%">
                                    <input type='number' class='layui-input' name='tPrice' value="0" disabled>
                                </div>
                            </div>
                        </div>
                        <div class='layui-item'>
                            <div class='layui-inline'>
                                <label class='layui-form-label'>还款日期</label>
                                <div class='layui-input-block' style="width:70%">
                                    <input type='text'  class='layui-input' name='repayTime'>
                                </div>
                            </div>
                        </div>
                        <div class='layui-item'>
                            <div class='layui-inline'>
                                <label class='layui-form-label'>还款总额</label>
                                <div class='layui-input-block' style="width:70%">
                                    <input type='number' class='layui-input' name='totalPrice' min="0">
                                </div>
                            </div>
                        </div>
                        <div class='layui-item'>
                            <div class='layui-inline'>
                                <label class='layui-form-label'>备注</label>
                                <div class='layui-input-block' style="width:70%">
                                    <input type='text' class='layui-input' name='remark'>
                                </div>
                            </div>
                        </div>`;
                var html = `<form class='layui-form layerOpen'><div class="layui-row"><div class="layui-col-md4">${formHtml}</div><div class="layui-col-md8"><div class="layui-collapse" lay-filter="collapse">`
                for (var i = 0; i < tableData.length; i++) {
                    html += `<div class="layui-colla-item">
                                <h2 class="layui-colla-title">
                                    <span>${tableData[i].isPay==1?'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;':'<input type="checkbox" name="id" lay-skin="primary" value="'+tableData[i].id+'" data-price="'+tableData[i].totalPrice+'" lay-filter="id">'}</span>
                                    <span>货单编码：${tableData[i].ordersn}</span>
                                    <span>货单总额：${tableData[i].totalPrice}</span>
                                    <span>到货时间：${tableData[i].deliveryTime.substr(0,10)}</span>
                                </h2>
                                <div class="layui-colla-content">`
                    html += `<table class="layui-table"><thead><tr><th>编号</th><th>材料</th><th>规格型号</th><th>单价</th><th>数量</th><th>单位</th><th>总额</th></tr></thead><tbody>`;
                    for (var j = 0; j < tableData[i].info.length; j++) {
                        html += `<tr><td>${j + 1}</td><td>${tableData[i].info[j].materialName}</td><td>${tableData[i].info[j].spec}</td><td>${tableData[i].info[j].price}</td><td>${tableData[i].info[j].amount}</td><td>${tableData[i].info[j].unitName}</td><td>${tableData[i].info[j].totalPrice}</td></tr>`
                    }
                    html += `</tbody></table></div></div>`
                }
                html += '</div></div></div></form>';
                layer.open({
                    type: 1,
                    title: "货单记录",
                    area: ['90%', '60%'],
                    content: html,
                    success: function () {
                        element.render('collapse');
                        laydate.render({
                            elem: 'input[name=repayTime]' //指定元素
                            ,max:fomDate('yyyy-mm-dd')
                        });
                        form.render();
                    },
                    btn: ['确定','关闭'],
                    skin: 'my-skin',
                    yes:function(){
                        var idInput = $('input[name=id]:checked');
                        var ids = [];
                        for(var i=0;i<idInput.length;i++){
                            ids.push(Number($(idInput[i]).val()));
                        }
                        var repayTime = $('input[name=repayTime]').val();
                        var tPrice = $('input[name=tPrice]').val();
                        var totalPrice = $('input[name=totalPrice]').val();
                        var remark = $('input[name=remark]').val();
                        if (repayTime == ''){
                            tips('还款',{msg:'请选择还款日期'})
                        }
                        if (totalPrice == 0){
                            tips('还款',{msg:'请填写还款金额'})
                        }
                        if (totalPrice > tPrice){
                            tips('还款',{msg:'还款金额不能大于货单总额'})
                        }
                        $.ajax({
                            url: url + "/finance/supplier/repayment",
                            type: "POST",
                            async: false,
                            data: {
                                supplierId: supplierId,
                                projectId: projectId,
                                repayTime: repayTime,
                                totalPrice: totalPrice,
                                orderIds:ids,
                                remark:remark,
                                token: $.parseJSON(localStorage.getItem('login_msg')).token
                            },
                            success: function (r) {
                                if (r.code == 100000) {
                                    tips('还款记录', r);
                                    setTimeout(function () {
                                        layer.closeAll();
                                        table.reload('lists');
                                    }, 2000)
                                } else {
                                    tips('还款记录', r);
                                }
                            }
                        });
                    }
                })
            } else if (data.event == "repaymentLists") {
                var month = data.data.time;
                var tableData = [];
                $.ajax({
                    url: url + "/finance/supplier/repaymentLists",
                    type: "POST",
                    async: false,
                    data: {
                        supplierId: supplierId,
                        month: month,
                        token: $.parseJSON(localStorage.getItem('login_msg')).token
                    },
                    success: function (r) {
                        if (r.code == 100000) {
                            tableData = r.data;
                        } else {
                            tips('还款记录', r);
                        }
                    }
                });
                var html = `<table class="layui-table"><thead><tr><th>还款总额</th><th>还款时间</th><th>备注</th></tr></thead><tbody>`;
                for (var i = 0; i < tableData.length; i++) {
                    html += `<tr><td>${tableData[i].totalPrice}</td><td>${tableData[i].repayTime}</td><td>${tableData[i].remark}</td></tr>`
                }
                html += `</tody></table>`
                layer.open({
                    type: 1,
                    title: "还款记录",
                    area: ['50%', '60%'],
                    content: html,
                    btn: ['关闭'],
                    skin: 'my-skin',
                })
            }
        });

        form.on('checkbox(id)', function(data){
            var tPrice = Number($('input[name=tPrice]').val());
            var price = Number($(data.elem).data('price'));
            if (data.elem.checked){
                tPrice += price
            }else{
                tPrice -= price
            }
            $('input[name=tPrice]').val(tPrice)
        });
    });
</script>
</html>